<template>
	<div>
		<el-row :gutter="20">
			<el-col :span="12" class="flex-row-left">
				<el-input  class="w-200 mr-10" placeholder="输入名称搜索" clearable />
				<el-button type="primary"><el-icon class="mr-5"><Search /></el-icon>查询</el-button>
			</el-col>			
			<el-col :span="12" class="flex-row-right">
				<el-button type="primary" plain @click="add"><el-icon class="mr-5"><Promotion /></el-icon>重取数</el-button>
				<el-button type="primary" plain @click="add"><el-icon class="mr-5"><Edit /></el-icon>修改</el-button>
				<el-button type="primary" plain @click="add"><el-icon class="mr-5"><Select /></el-icon>确认完成</el-button>
				<el-button><el-icon class="mr-5"><Delete /></el-icon>批量删除</el-button>
			</el-col>
		 </el-row>
		 <el-table :data="tableData" v-loading="loading" class="mt-20" border :header-cell-style="{ backgroundColor:'#f8f8f8'}">
		 	<el-table-column type="selection" width="55" />	
		 	<el-table-column prop="id" label="ID"  width="55"/>
		 	<el-table-column prop="id" label="序号"  />
		 	<el-table-column prop="id" label="客户名称" width="120"/>
			<el-table-column prop="id" label="年度" width="120"/>
			<el-table-column prop="id" label="月份" width="120"/>
			<el-table-column prop="id" label="税种" width="120"/>
			<el-table-column prop="id" label="表单状态" width="120"/>
			<el-table-column prop="id" label="处理进度" width="120"/>
			<el-table-column prop="id" label="会计顾问" width="120"/>
			<el-table-column prop="id" label="处理人员" width="120"/>
			<el-table-column prop="id" label="税额" width="120"/>
			<el-table-column prop="id" label="创建时间" width="120"/>
			<el-table-column prop="id" label="审核人" width="120"/>
			<el-table-column prop="id" label="审核时间" width="120"/>
			<el-table-column prop="id" label="客户确认状态" width="120"/>
			<el-table-column prop="id" label="客户确认时间" width="120"/>
			<el-table-column prop="id" label="G端确认状态" width="120"/>
		 	<el-table-column prop="id" label="G端确认时间" width="120"/>
			<el-table-column prop="id" label="B端确认状态" width="120"/>
			<el-table-column prop="id" label="B端确认时间" width="120"/>
			<el-table-column prop="id" label="查看回执" width="120"/>
		 </el-table>
		 <div class="flex-row-right mt-20">
			 <el-pagination
			   :page-sizes="[100, 200, 300, 400]"
			   layout="total, sizes, prev, pager, next, jumper"
			   :total="400"
			 />
		 </div>
		 <el-tabs v-model="activeName" class="clin-tabs">
		 	<el-tab-pane label="报税明细" name="报税明细" >
		 		<el-table :data="tableData" v-loading="loading" class="mt-20" border :header-cell-style="{ backgroundColor:'#f8f8f8'}">
		 			<el-table-column width="55"/>
		 			<el-table-column prop="id" width="55" label="序号"/>
		 			<el-table-column prop="id" label="项目"/>	
		 			<el-table-column prop="id" width="120" label="值"/>	
		 		</el-table>
		 		<div class="flex-row-right mt-20">
		 			 <el-pagination
		 			   :page-sizes="[100, 200, 300, 400]"
		 			   layout="total, sizes, prev, pager, next, jumper"
		 			   :total="400"
		 			 />
		 		</div>
		 	</el-tab-pane>
		 	<el-tab-pane label="工资表" name="工资表">
		 		<el-table :data="tableData" v-loading="loading" class="mt-20" border :header-cell-style="{ backgroundColor:'#f8f8f8'}">
		 			<el-table-column width="55"/>
		 			<el-table-column prop="id" width="55" label="序号"/>
		 			<el-table-column prop="id" label="人员"/>	
		 			<el-table-column prop="id" width="120" label="证件号码"/>	
					<el-table-column prop="id" width="120" label="应发工资"/>	
					<el-table-column prop="id" width="120" label="免税所得"/>	
					<el-table-column prop="id" width="120" label="代扣养老保险"/>	
					<el-table-column prop="id" width="120" label="代扣医疗保险"/>	
					<el-table-column prop="id" width="120" label="代扣失业保险"/>	
					<el-table-column prop="id" width="120" label="代扣大病保险"/>	
					<el-table-column prop="id" width="120" label="代扣社保合计"/>	
					<el-table-column prop="id" width="120" label="代扣公积金"/>	
					<el-table-column prop="id" width="120" label="其他费用"/>	
					<el-table-column prop="id" width="120" label="实发工资"/>	
		 		</el-table>
		 		<div class="flex-row-right mt-20">
		 			 <el-pagination
		 			   :page-sizes="[100, 200, 300, 400]"
		 			   layout="total, sizes, prev, pager, next, jumper"
		 			   :total="400"
		 			 />
		 		</div>
		 	</el-tab-pane>
		 	<el-tab-pane label="人员表" name="人员表">
		 		<el-table :data="tableData" v-loading="loading" class="mt-20" border :header-cell-style="{ backgroundColor:'#f8f8f8'}">
		 			<el-table-column width="55"/>
		 			<el-table-column prop="id" width="55" label="序号"/>
		 			<el-table-column prop="id" width="120" label="工号"/>						
					<el-table-column prop="id" label="姓名"/>	
		 		</el-table>
		 		<div class="flex-row-right mt-20">
					 <el-pagination
					   :page-sizes="[100, 200, 300, 400]"
					   layout="total, sizes, prev, pager, next, jumper"
					   :total="400"
					 />
				</div>
		 	</el-tab-pane>
		 </el-tabs>
	</div>
</template>

<script>
	import cateForm from '@/components/basic/employees/cate/form.vue'
	export default{
		components:{
			cateForm,
		},
		data(){
			return {	
				dialogVisible:false,
				value5:false,
				loading:true,
				activeName:"报税明细",
				tableData:[],
			}
		},		
		created() {
			this.getList();
		},
		methods:{
			add(){
				this.dialogVisible =  true;
				this.$nextTick(() => {
					
				});
			},
			dialogVisibleByValue (dialogVisible) {
				this.dialogVisible = dialogVisible
			},
			getList(){
				let that = this;
				setTimeout(() => {
				    that.tableData = [
				      {
				    	id: 1,
				      },
				      {
				    	id: 2,
				      },
				      {
				    	id: 3,
				      },
				      {
				    	id: 4,
				      },
				      {
				    	id: 5,
				      },
				    ];
				    that.loading = false;
				}, 2000)
			}
		},
	}
</script>
<style>
	.example-showcase .el-loading-mask {
	  z-index: 9;
	}
</style>
